<template>
  <div>
    <!-- 头部组件 -->
    <login-top title="注册bilibili">
      <span slot="left" class="title-left"></span>
      <span slot="right" class="title-right" @click="$router.push('/login')">切换到登录</span>
    </login-top>
    <!-- 中间输入框 -->
    <loginText
      label="姓名"
      placeholder="请输入姓名"
      rule="^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$"
      style="margin: 15px 0"
      @inputchange=" val => from.name = val"
    ></loginText>
    <loginText
      label="账号"
      placeholder="请输入账号"
      rule="^.{6,16}$"
      @inputchange=" val => from.username = val"
    ></loginText>
    <loginText
      label="密码"
      placeholder="请输入密码"
      rule="^.{6,16}$"
      type="password"
      @inputchange=" val => from.password = val"
    ></loginText>
    <!-- 底部按钮 -->
    <loginBtn btntext="同意并注册" @registerClick="registerClick"></loginBtn>
  </div>
</template>

<script>
import LoginTop from '@/components/common/LoginTop'
import loginText from '@/components/common/LoginText'
import loginBtn from '@/components/common/LoginBtn'
import { register } from '@/api/index'
import { Toast } from 'vant'
export default {
  name: 'register',
  components: {
    LoginTop,
    loginText,
    loginBtn
  },
  data() {
    return {
      from: {
        name: '',
        username: '',
        password: ''
      }
    }
  },
  created() {},
  methods: {
    async registerClick() {
      let rule1 = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
      let rule2 = /^.{6,16}$/
      if (
        rule1.test(this.from.name) &&
        rule2.test(this.from.username) &&
        rule2.test(this.from.password)
      ) {
        console.log('正则校验成功')
        const { data } = await this.$store.dispatch('registerUser', this.from)
        console.log(data, '注册')
        if (data.code === 200) {
          
          setTimeout(() => {
            this.$router.push('/login')
          }, 500)
        }
        Toast(data.msg)
        console.log('同步')
      } else {
        Toast('输入错误')
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>